<template>
    <!-- 首页 -->
    <!-- 头部 -->
    <div class="home-page">
        <div class="layout-full-media-box container-background">
            <el-carousel class="background-img" :interval="5000" arrow="always">
                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                    <img :src="item.img" alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="layout-media-box container-main">
            <el-row type="flex" style="padding:70px 0 40px 0;height:30px;" class="row-bg main-title" justify="space-between">
                <el-col :span="24">
                    <div class="title-logo" style=""><img src="@/assets/img/img_decorate.png" alt=""></div>
                    <div class="title-size">在线问诊 <span class="title-tips">专业医生在线为您解答</span></div>
                </el-col>
            </el-row>
            <!-- 科室筛选栏 -->
            <el-row class="doctor-department" :gutter="12">
                <el-col :span="18">
                    <ul class="department-ulist">
                        <!-- <li :class="{'active': currentDepartmentId === 0}" @click="toggleDepartmentItem(0)">全部</li> -->
                        <template v-for="(item, index) in departmentList">
                            <li v-show="(index < 4 || (index >= 4 && showMoreDepartment)) && (!$global.platform('lj') || ($global.platform('lj') && item.isDisplay == 1))" :class="{'active': currentDepartmentId === item.id}" @click="toggleDepartmentItem(item.id)">
                                {{item.departmentName}}
                            </li>
                        </template>
                        <li class="li-handle">
                            <span @click="showMoreDepartment = !showMoreDepartment">{{showMoreDepartment ? '收起': '更多'}}</span>
                        </li>
                    </ul>
                </el-col>
                <el-col :span="6">
                    <el-input class="department-handle" size="small" v-model.trim="doctorSearchVal">
                        <el-button slot="append" type="primary" @click="getmoreDoc(showAllDoctor)">搜索</el-button>
                    </el-input>
                </el-col>
            </el-row>

            <!-- 医生列表 -->
            <div class="doctor-introduce">
                <el-row type="flex" justify="space-around">
                    <el-col :span="6">
                        <div class="grid-content bg-purple"></div>
                    </el-col>
                </el-row>
                <ul class="doctor-ulist clearfix">
                    <template v-if="doctorList.length > 0">
                        <li class="ulist-li" v-for="(item, index) in doctorList" :key="index">
                            <div class="doctor-status">
                                <img v-if="item.isOnline == 1" src="@/assets/img/img_on_line.png" alt="">
                                <img v-if="item.isOnline == 0" src="@/assets/img/img_off_line.png" alt="">
                            </div>
                            <div class="frame-top">
                                <div class="doctor-img">
                                    <img :src="item.doctorHeadImg" alt="">
                                </div>
                                <!-- <el-avatar shape="circle" :size="62" :src="item.doctorHeadImg" fit="scale-down"></el-avatar> -->
                                <div class="doctor-info">
                                    <span class="doc-name">{{item.trueName}}</span>
                                    <el-tag class="doc-tag">{{item.doctorJobTitle}}</el-tag>
                                    <el-tag v-if="item.departmentName && item.departmentName != ''" type="warning" class="doc-tag">{{item.departmentName}}</el-tag>
                                    <p class="doc-age">
                                        <span>从业年限 {{item.workAge}}年</span>
                                        <span class="age-size">年龄 {{item.doctorAge}}岁</span>
                                    </p>
                                </div>
                            </div>
                            <div class="doctor-describe">
                                <el-popover v-if="item.doctorSynopsis" placement="bottom" width="400" trigger="hover" :content="item.doctorSynopsis">
                                    <p slot="reference">{{item.doctorSynopsis}}</p>
                                </el-popover>
                                <p v-else>{{item.doctorSynopsis}}</p>
                            </div>
                            <div class="doctor-good">
                                擅长：<span>{{item.doctorSpecialty}}</span>
                            </div>
                            <div class="doctor-duty">
                                <div v-if="$authInfo.getAuthType() == 'D'" class="duty-item" @click="gotoOnlineInquiry('workingSchedule')">
                                    <img src="@/assets/img/icon_duty.png" alt="">今日值班
                                </div>
                                <div v-else class="duty-item" @click="goMini">
                                    网络问诊
                                </div>
                            </div>
                        </li>
                        <li class="ulist-li check-more-doc" v-if="showAllDoctor == false && doctorList.length >= 5" @click="getmoreDoc(true)">
                            <p>查看更多 ></p>
                        </li>
                    </template>
                    <li v-else class="ulist-li check-more-doc">
                        <p>暂无相关医生数据</p>
                    </li>
                </ul>
            </div>

            <!-- 合作伙伴 -->
            <el-row type="flex" style="padding:70px 0 40px 0;height:30px;" class="row-bg main-title" justify="space-between">
                <el-col :span="24">
                    <div class="title-logo" style=""><img src="@/assets/img/img_decorate.png" alt=""></div>
                    <div class="title-size">合作伙伴 <span class="title-tips">合作共赢，服务用户</span></div>
                </el-col>
            </el-row>
            <div class="partner-frame">
                <ul class="partner-ulist">
                    <li v-for="(item, index) in enterprisesList" :key="index">
                        <a :target="item.enterprisesUrl ? '_blank' : '_self'" :href="item.enterprisesUrl ? item.enterprisesUrl : 'javascript:;'"><img :src="item.enterprisesImg" alt=""></a>
                    </li>
                </ul>
            </div>
        </div>

        <go-mini-dialog v-if="goMiniVisible" ref="goMini"></go-mini-dialog>
    </div>
</template>


<script>
    import goMiniDialog from '../inquiry/userinquiry/go-mini-dialog'
    export default {
        name: 'home-page',
        components: {
            goMiniDialog
        },
        data() {
            return {
                enterprisesList: [], //合作伙伴列表

                departmentList: [], //获取科室列表
                bannerList: [], //获取轮播图

                showMoreDepartment: false, // 是否展示更多部门
                currentDepartmentId: 0, // 当前科室id

                doctorSearchVal: '', // 搜索医生字段
                doctorList: [], // 获取医生列表
                showAllDoctor: false, // 点击查看全部医生

                goMiniVisible: false,
            }
        },
        mounted() {
            this.getHomeData();
        },
        methods: {
            getHomeData() { //获取数据
                this.$ajax.getDepartmentListPc().then(res => { // 获取科室列表
                    this.departmentList = res.data.list
                }).catch(err => {
                    this.$message.closeAll();
                    this.$message({
                        message: err.msg,
                        type: 'error',
                    })
                })

                this.$ajax.getHomeDoctorList().then(res => { //获取医生列表
                    // this.doctorList = res.data.list
                    let docList = res.data.list
                    if (docList.length > 4) {
                        for (let i = 0; i < 5; i++) {
                            this.doctorList.push({
                                birthday: docList[i].birthday,
                                createBy: docList[i].createBy,
                                createTime: docList[i].createTime,
                                current: docList[i].current,
                                departmentName: docList[i].departmentName,
                                doctorAge: docList[i].doctorAge,
                                doctorEducation: docList[i].doctorEducation,
                                doctorHeadImg: docList[i].doctorHeadImg,
                                doctorJobTitle: docList[i].doctorJobTitle,
                                doctorSpecialty: docList[i].doctorSpecialty,
                                doctorSynopsis: docList[i].doctorSynopsis,
                                generalPractitionerSign: docList[i].generalPractitionerSign,
                                id: docList[i].id,
                                isOnline: docList[i].isOnline,
                                size: docList[i].size,
                                textInterrogation: docList[i].textInterrogation,
                                trueName: docList[i].trueName,
                                updateBy: docList[i].updateBy,
                                updateTime: docList[i].updateTime,
                                videoInterrogation: docList[i].videoInterrogation,
                                workAge: docList[i].workAge,
                                workDate: docList[i].workDate,
                            })
                        }
                    } else {
                        this.doctorList = res.data.list || []
                    }
                }).catch(err => {
                    this.$message.closeAll();
                    this.$message({
                        message: err.msg,
                        type: 'error',
                    })
                })

                this.$ajax.getEnterprisesListPc().then(res => { //获取合作伙伴列表
                    // let picList = res.data.list
                    // if (picList.length > 7) {
                    //     for (let i = 0; i < 8; i++) {
                    //         this.enterprisesList.push({
                    //             enterprisesImg: picList[i].enterprisesImg,
                    //             enterprisesUrl: picList[i].enterprisesUrl,
                    //         })
                    //     }
                    // } else {}
                    this.enterprisesList = res.data.list || []
                }).catch(err => {
                    this.$message.closeAll();
                    this.$message({
                        message: err.msg,
                        type: 'error',
                    })
                })
                this.$ajax.getBannerList().then(res => { //获取轮播图
                    this.bannerList = res.data.list
                }).catch(err => {
                    this.$message({
                        message: err.msg,
                        type: 'error',
                    })
                })
            },
            getmoreDoc(isAll = false) { //获取全部医生列表
                let params = {
                    departmentId: this.currentDepartmentId,
                };

                if (!isAll) {
                    // 不显示全部医生时，默认展示 5 条
                    this.showAllDoctor = false;

                    params.size = 5;
                    params.current = 1;
                } else {
                    this.showAllDoctor = true;
                    params.size = 0;
                }

                // 搜索医生
                if (this.doctorSearchVal) {
                    params.keyWord = this.doctorSearchVal;
                    // delete params.departmentId;
                }

                this.$ajax.getHomeDoctorList(params).then(res => {
                    this.doctorList = res.data.list || [];
                }).catch(err => {
                    this.$message.closeAll();
                    this.$message({
                        message: err.msg,
                        type: 'error',
                    })
                })
            },
            toggleDepartmentItem(id) {
                this.currentDepartmentId = id;

                this.getmoreDoc();
            },
            gotoLogin() { //登录
                this.$router.push('/login');
            },
            gotoGuidePage() { //前往用户指南
                this.$router.push('/guide');
            },
            gotoHomePage() { //前往首页
                this.$router.push('/home');
            },
            gotoInquiry() { // 前往网络问诊
                this.$router.push('/inquiry');
            },
            gotoUserPage() { // 前往个人中心
                this.$router.push('/user');
            },
            // 前往网络问诊，activeName指定选项卡
            gotoOnlineInquiry(activeName) {
                this.$router.push({
                    path: '/inquiry',
                    query: {
                        activeName
                    }
                })
            },
            goMini() {
                this.goMiniVisible = true
                this.$nextTick(() => {
                    this.$refs.goMini.init()
                })
            },
        },

    }
</script>



<style lang="scss">
    .home-page {
        width: 100%;
        height: 100%;
        margin-top: -20px;
        background: #f3f3f3;

        .container-background {
            margin-top: -20px;
        }

        // overflow: auto;

        // .container-background {
        //     background: url("../../assets/img/img_banner.png") no-repeat top center !important;
        //     height: 610px;
        //     background-size: cover;
        //     overflow: hidden;
        // }
        .el-carousel__container {
            height: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .background-img {
            width: 100%;
            // height: 610px;
            height: 50vh;

            .el-carousel__container {
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .contain-top {
            min-width: 768px;
            color: #fff;
            height: 72px;
            background: transparent;
            width: 100%;
            position: relative;
            max-width: 1200px;
            margin: auto 310px;
            padding: 0;
            display: flex;

            .mouse-pointer {
                cursor: pointer;
            }

            &>.contain-nav {
                text-align: right;
                display: flex;

                .nav-left {
                    display: flex;
                    width: 700px;
                    justify-content: flex-start;

                    .nav-logo {
                        width: 44px;
                        height: 44px;
                        margin: 14px 10px 0 0;
                        // float: left;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .nav-title {
                        font-size: 18px;
                        margin: 0;
                        // display: inline-block;
                        font-weight: bold;
                        float: left;
                        line-height: 72px;
                        vertical-align: middle;
                        white-space: nowrap;
                        color: #fff;
                    }
                }

                .nav-right>div {
                    white-space: nowrap;
                    margin: 0 0 0 20px;
                    font-size: 16px;
                    font-weight: 500;
                    display: inline-block;
                    line-height: 72px;
                }
            }
        }

        .container-main {
            min-height: 100px;
            // padding: 70px 310px 70px 310px;
            margin: 0px auto;

            .main-title {
                height: 46px;

                .title-logo {
                    width: 38px;
                    height: 28px;
                    margin-right: 20px;
                    float: left;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .title-size {
                    font-size: 28px;
                    float: left;
                    font-weight: bold;

                    .title-tips {
                        font-size: 15px;
                        font-weight: 500;
                    }
                }

                .search-size {
                    width: 282px;
                    height: 46px;
                    margin-right: 20px;
                }

                .search-btn {
                    width: 94px;

                    // height: 46px;
                }
            }

            .doctor-department {
                margin: 0 auto;
                padding: 30px 0;

                .department-ulist {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    li {
                        padding: 8px 20px;
                        // margin-right: 30px;
                        height: 40px;
                        color: #757575;
                        font-weight: bold;
                        cursor: pointer;

                        &.active {
                            // background: #e5ebf0;
                            // border-radius: 6px;
                            color: #006db8;
                        }

                        &:hover {
                            background: #e5ebf0;
                            border-radius: 6px;
                            color: #006db8;
                        }

                        &.li-handle:hover {
                            background: none;
                        }
                    }
                }

                .department-handle {
                    width: 100%;
                }
            }

            .doctor-introduce {
                .doctor-ulist {
                    // display: flex;
                    // align-items: flex-start;
                    // flex-wrap: wrap;
                }

                .check-more-doc {
                    text-align: center;
                    cursor: pointer;
                    font-size: 18px;

                    p {
                        text-align: center;
                        padding: 120px 0;
                    }
                }

                .ulist-li {
                    position: relative;
                    text-align: left;
                    // min-width: 400px;
                    float: left;
                    width: 31%;
                    margin: 20px 1.166666% 0;
                    height: 313px;
                    background: #fff;
                    padding: 19px 22px 60px 20px;
                    box-shadow: 0 1px 1px 0 #efefef;
                    border-radius: 6px;

                    .doctor-status {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 60px;
                        height: 66px;
                    }

                    .frame-top {
                        position: relative;
                        padding-left: 72px;
                        padding-right: 8px;

                        // height: 62px;
                        .doctor-img {
                            position: absolute;
                            left: 0;
                            top: 50%;
                            margin-top: -31px;
                        }
                    }

                    .doctor-info {
                        .doc-name {
                            font-size: 18px;
                            font-weight: bold;
                            max-width: 95px;
                        }

                        .doc-tag {
                            height: 22px;
                            line-height: 22px;
                            margin-left: 15px;
                        }

                        .doc-age {
                            padding-top: 5px;
                            font-size: 14px;
                            font-weight: 500;

                            .age-size {
                                padding-left: 20px;
                            }
                        }
                    }

                    .doctor-describe {
                        padding: 26px 0 30px 0;
                        font-size: 14px;
                        font-weight: 500;
                        color: #757575;

                        p {
                            height: 44px;
                            min-height: 44px;
                            width: 100%;

                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                    }

                    .doctor-good {
                        color: #3c3c3c;
                        font-size: 14px;
                        font-weight: 500;
                        margin-bottom: 15px;
                        display: -webkit-box !important;
                        overflow: hidden;

                        text-overflow: ellipsis;
                        word-break: break-all;

                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                    }

                    .doctor-duty {
                        position: absolute;
                        left: 0;
                        bottom: 0;
                        width: 100%;
                        height: 60px;
                        line-height: 60px;
                        border-top: 1px solid #e0e0e0;
                        text-align: center;

                        img {
                            width: 18px;
                            height: 16px;
                            margin-right: 10px;
                            vertical-align: middle;
                        }

                        .duty-item {
                            cursor: pointer;
                        }
                    }

                    .doctor-img {
                        width: 62px;
                        height: 62px;
                        border-radius: 31px;
                        display: inline-block;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 31px;
                        }
                    }
                }
            }

            .partner-frame {
                .partner-ulist {
                    display: flex;
                    align-items: center;
                    justify-content: left;
                    flex-wrap: wrap;

                    li {
                        width: 19%;
                        height: 126px;
                        border-radius: 6px;
                        margin: 20px 0.5% 0 0.5%;

                        img {
                            width: 100%;
                            height: 100%;
                            border-radius: 6px;
                            margin: 20px 1% 0;

                            img {
                                width: 100%;
                                height: 100%;
                                border-radius: 6px;
                                vertical-align: baseline;
                            }
                        }
                    }
                }

                // .doctor-frame {
                //     position: relative;
                //     text-align: left;
                //     min-width: 400px;
                //     width: 400px;
                //     margin: 0 auto;
                //     height: 313px;
                //     background: #fff;
                //     padding: 19px 22px 0 20px;
                //     margin-top: 20px;
                //     box-shadow: 0 1px 1px 0 #efefef;
                //     border-radius: 6px;
                // }
            }

            // .doctor-frame {
            //     position: relative;
            //     text-align: left;
            //     min-width: 400px;
            //     width: 400px;
            //     margin: 0 auto;
            //     height: 313px;
            //     background: #fff;
            //     padding: 19px 22px 0 20px;
            //     margin-top: 20px;
            //     box-shadow: 0 1px 1px 0 #efefef;
            //     border-radius: 6px;
            // }
        }

        .container-footer {
            background-color: #2f3234;
            color: #c6c7c9;
            text-align: right;
            line-height: 161px;
            height: 161px !important;
            width: 100%;
            bottom: 0;
            padding: 0 310px 0 310px;

            &>.contain-nav {
                text-align: right;
                display: flex;

                .nav-left {
                    display: flex;

                    .footer-title {
                        line-height: 161px;
                    }
                }

                .nav-right>div {
                    white-space: nowrap;
                    margin: 0 0 0 20px;
                    font-size: 18px;
                    font-weight: 500;
                    display: inline-block;
                    line-height: 72px;
                }
            }
        }
    }

    .home-page {
        .el-main {
            background-color: #f3f3f3;
            color: #333;
            text-align: center;
            padding: 0 310px 0 310px;
            width: 100%;
            overflow: auto;
        }
    }
</style>